<template>
  <div class="home">
    <!-- mes控制输入框，rig里面的内容为图标样式，title为标题 bgc为背景颜色，如想透明就为0，否则为1
    mes不为空就不显示文本框   rig里面写图标的具体样式
    title为标题的内容 -->
    <Head mes="" rig="el-icon-search" title="" bgc="1" />
    <div class="content">
      <div class="content-top">
        <router-link :to="{ name: 'Home' }" tag="span">推荐</router-link>
        <router-link :to="{ name: 'Home1' }" tag="span" class="bu"
          >活动</router-link
        >
        <router-link :to="{ name: 'Home2' }" tag="span">游记</router-link>
      </div>
      <div class="min">
        <div class="min-top">
          <span>热门活动</span>
          <div>
            <div
              v-for="(value, index) in school"
              v-show="index < 3"
              :key="index"
              @click="hd(index)"
            >
              <img :src="value.url" alt="" />
              <span>{{ value.title }}</span>
              <span>国庆节特价，全家有，带你去世上最美的地方</span>
              <div>
                <i class="el-icon-right"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="min-con">
          <span>特色景区</span>
          <div>
            <div
              v-for="(value, index) in school"
              v-show="index > 8 && index < 13"
              :key="index"
              @click="jin(index)"
            >
              <img :src="value.url" alt="" />
              <span>{{ value.title }}</span>
            </div>
          </div>
        </div>
        <div class="min-con">
          <span>兴趣活动</span>
          <div>
            <div
              v-for="(value, index) in school"
              v-show="index > 3 && index < 9"
              :key="index"
              @click="hd(index)"
            >
              <img :src="value.url" alt="" />
              <span>{{ value.title }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- num的数字表示在第几页，以控制颜色 -->
    <Foot num="1" />
  </div>
</template>

<script>
// @ is an alias to /src
import Head from "@/components/Head.vue";
import Foot from "@/components/Foot.vue";

export default {
  name: "Home",
  components: {
    Head,
    Foot,
  },
  data() {
    return {
      activeName: "second",
      school: [],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    hd(index) {
      this.$store.commit("gaiid", this.school[index].id);
      this.$router.push({ name: "Huodong" });
    },
    jin(index) {
      this.$store.commit("gaiid", this.school[index].id);
      this.$router.push({ name: "Mudidi" });
    },
  },
  mounted() {
    this.ajax({
      method: "get",
      url: "/queryAll",
    }).then((res) => {
      this.school = res.data;
    });
  },
};
</script>
<style lang="scss" scoped>
.content {
  margin-bottom: 60px;
}
.min-con {
  margin-top: 10px;
  > span {
    font-weight: bold;
    font-size: 22px;
    // margin-bottom:60px;
  }
  > div {
    width: 100%;
    // height: 200px;
    padding-bottom: 10px;
    // padding-right: 80px;
    overflow-x: scroll;
    box-sizing: border-box;
    display: flex;
    margin-top: 10px;
    // flex-shrink: 0;
    // flex-wrap: wrap;

    // justify-content: space-between;
    > div {
      width: 140px;
      // width: 150px;
      // height: 200px;
      border-radius: 10px;
      box-sizing: border-box;
      margin: 0 15px;
      flex-shrink: 0;
      box-shadow: 0px 0px 5px rgba(68, 68, 68, 0.753);
      > img {
        width: 100%;
        height: 170px;
        border-radius: 10px 10px 0 0;
      }
    }
  }
}

.min {
  box-sizing: border-box;
  width: 100%;
  height: 725px;
  padding: 10px;
  border-top: 1px solid rgba(190, 190, 190, 0.719);
  overflow: scroll;
  > .min-top {
    > span {
      font-weight: bold;
      font-size: 22px;
    }
    > div {
      width: 100%;
      // height: 220px;
      overflow-x: scroll;
      display: flex;
      margin-top: 10px;
      padding-bottom: 10px;
      // flex-wrap: wrap;
      > div {
        width: 300px;
        height: 210px;
        border-radius: 20px;
        margin: 0 15px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: left;
        // background-color: red;
        box-shadow: 0px 0px 5px rgba(68, 68, 68, 0.753);
        > img {
          width: 300px;
          height: 150px;
          border-radius: 20px 20px 0 0;
          margin-bottom: 5px;
          // height: 125px;
        }
        > span:nth-of-type(2) {
          margin-top: 5px;
          font-size: 12px;
          color: gray;
        }
        > div {
          width: 30px;
          height: 30px;
          position: absolute;
          text-align: center;
          line-height: 30px;
          bottom: 15px;
          right: 15px;
          border: 1px solid #000;
          cursor: pointer;
        }
      }
    }
  }
}

.content-top {
  display: flex;
  justify-content: space-between;
  // margin-top: 10px;
  > span {
    width: calc(100% / 3);
    height: 45px;
    line-height: 45px;
    text-align: center;
    // &:hover{
    //   border-bottom: 1px solid rgb(15, 208, 241);
    // }
  }
}
.bu {
  border-bottom: 4px solid rgb(15, 208, 241);
}
</style>